.avatar {
	background-color: $black-bg;
	border-radius: 50%;
	color: $black-text;
	display: block;
	height: $avatar-height;
	line-height: $avatar-height;
	text-align: center;
	width: $avatar-height;
	&:focus,
	&:hover {
		color: $black-text;
		text-decoration: none;
	}
	&.pull-left {
		margin-right: $grid-gutter;
	}
	&.pull-right {
		margin-left: $grid-gutter;
	}
	.card-header-side > & {
		&:first-child {
			margin-top: (($avatar-height - $line-height) / -2);
		}
		&:last-child {
			margin-bottom: (($avatar-height - $line-height) / -2);
		}
	}
	.nav a > &,
	.nav .a > & {
		margin-top: (($avatar-height - $line-height) / -2);
		margin-bottom: (($avatar-height - $line-height) / -2);
	}
	img {
		border-radius: 50%;
		height: 100%;
		vertical-align: top;
		width: 100%;
	}
	.fa {
		display: block;
		height: 100%;
		line-height: inherit;
		text-align: center;
	}
	.fa-text {
		font-family: inherit;
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.avatar-#{$color} {
			background-color: nth($palette-color, $i);
			color: $white;
			&:focus,
			&:hover {
				color: $white;
			}
		}
	}

// size
	.avatar-lg {
		height: ($avatar-height * 2);
		line-height: ($avatar-height * 2);
		width: ($avatar-height * 2);
	}

	.avatar-sm {
		height: ($avatar-height * 0.8);
		line-height: ($avatar-height * 0.8);
		width: ($avatar-height * 0.8);
		.card-header-side > & {
			&:first-child {
				margin-top: (($avatar-height * 0.8 - $line-height) / -2);
			}
			&:last-child {
				margin-bottom: (($avatar-height * 0.8 - $line-height) / -2);
			}
		}
		.nav a > &,
		.nav .a > & {
			margin-top: (($avatar-height * 0.8 - $line-height) / -2);
			margin-bottom: (($avatar-height * 0.8 - $line-height) / -2);
		}
	}

.avatar-inline {
	display: inline-block;
}

.avatar-transparent {
	background-color: transparent;
}
